<template>
  <transition name="fade">
    <div v-if="changes">
      <!-- 菜单权限 -->
      <h1 class="role-title">菜单权限</h1>
      <div class="rolePanel" v-for="d in data.menuPermissionList" :key="d.id">
        <div class="firstPanel">
          <el-checkbox v-model="d.checked" :disabled="currentId===0" @change="changeFirst(d.checked, d)">{{d.label}}</el-checkbox>
        </div>
        <div class="menu menuPadding">
          <div v-for="item in d.children" :key="item.id" class="first">
            <el-checkbox :label="item.label" v-model="item.checked" :disabled="currentId===0" @change="changeSecond(item.checked, item, d)"
              v-if="item.have">{{item.label}}</el-checkbox>
            <div v-for="i in item.children" :key="i.id" class="second">
              <el-checkbox :label="i.label" v-model="i.checked" :disabled="currentId===0" @change="changeThird(i.checked, item, d)">{{i.label}}</el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <!-- 流程权限 -->
      <h1 class="role-title">流程权限</h1>
      <div class="menu menuPadding rolePanel flex-wrap">
        <div v-for="d in data.flowPermissionList" :key="d.id" class="menu">
          <div v-for="item in d.children" :key="item.id" class="first">
            <el-checkbox :label="item.label" v-model="item.checked" :disabled="currentId===0" @change="changeSecond(item.checked, item, d)"
              v-if="item.have">{{item.label}}</el-checkbox>
            <div v-for="i in item.children" :key="i.id" class="second">
              <el-checkbox :label="i.label" v-model="i.checked" :disabled="currentId===0" @change="changeThird(i.checked, item, d)">{{i.label}}</el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import {
    roleManagement
  } from "../../../service/service_zbw";
  export default {
    props: {
      data: {
        type: Object
      },
      currentOperate: {
        type: Boolean
      },
      currentId: {
        type: Number
      }
    },
    data() {
      return {
        changes: false
      }
    },
    methods: {
      /**
       *
       * 选择一级节点时
       */
      changeFirst(status, datas) {
        //当前节点状态为消选中时，要去掉该节点及该节点的所有子节点的选中
        //调用二级菜单的选中方法，取消选中
        this.changeSecond(status, datas, datas);
      },
      /**
       * 选择二级节点时触发父子级联动
       */
      changeSecond(status, datas, fatherNode) {
        //当前节点选中时，父子节点也应该选中
        if (status) {
          fatherNode.checked = status;
        }
        //当前节点取消选中时，要去掉该节点及该节点的所有子节点的选中
        if (datas.children && datas.children instanceof Array) {
          for (let i of datas.children) {
            i.checked = status;
            if (i.children && i.children instanceof Array) {
              for (let j of i.children) {
                j.checked = status;
              }
            }
          }
        }
      },
      /**
       * 选择三级节点时触发父子级联动
       */
      changeThird(status, datas, grandFatherNode) {
        //判断是否有节点选中
        let flag = false;
        if (datas.children && datas.children instanceof Array) {
          for (let i of datas.children) {
            if (i.checked) {
              flag = true;
              break;
            }
          }
        }
        //如果有一个选中，则父级选中，如果全没选中，则父级不选中
        if (flag) {
          datas.checked = flag;
          grandFatherNode.checked = flag;
        }
      }
    },
    watch: {
      currentOperate(newval) {
        if (newval) {
          this.$emit('checkFinish', this.data);
        }
      },
      currentId(newval) {
        this.changes = false;
        this.$nextTick(() => {
          this.changes = true;
        });
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.changes = true;
      });
    }
  }

</script>

<style scoped>
  /* 消除菜单选中效果去除时的过渡效果 */
  /* .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 1
  } */

  .firstPanel {
    border-bottom: 1px solid rgb(238, 238, 238);
    padding: 10px 10px;
    background-color: #f8f8f8
  }

  .menu {
    display: flex;
    justify-content: flex-start;
  }

  .menuPadding {
    padding: 10px 10px;
  }

  .first {
    padding-right: 50px;
    box-sizing: border-box;
  }

  .second {
    margin-left: 14px;
  }
 .role-title{
   font-size: 14px;
   background-color: #DCD8D9;
   padding:6px 0;
   font-weight: bold;
   text-indent:10px;
  }
  .flex-wrap.menuPadding .menu{
    margin-bottom: 20px;
  }
  .rolePanel{
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    margin: 10px 0;
    background-color: #fff
  }
</style>

